<style>
    /* Chat containers */

.main{
  margin: 0px 20% 0px 20%

}
.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

/* Darker chat container */
.darker {
  border-color: #ccc;
  background-color: #ddd;
}

/* Clear floats */
.container::after {
  content: "";
  clear: both;
  display: table;
}

.right-content .like{
    align-content: right;
    align-items: right;
    float: right;
}
.right-content  span{
    float: right;

}

.inputarea{
  display: flex;
  justify-content:center 
}

.inputarea form {
  margin: 10px;
}

.inputarea input{
  width: 400px;
}


</style>
<div class = "main"  *ngIf="isDataLoaded">
  <div > 房间名：{{room.roomName}} 创建者：{{room.owner.username}}

     <div  *ngFor ="let item of room.questions ; let i=index">
          <div  *ngIf ="user.role =='student'" > 
              <div class="container" *ngIf="i%2==0">
                <div>{{item.createdOwner.username}} ：{{item.question}}</div>
                <div class ="right-content">
                    <span>点赞数：{{item.likeUser.length}}</span>
                    <button class ="like" (click) = "addLike(item.questionId, $event)" [disabled] = "item.liked">点赞</button>
                </div>
              </div>
            
              <div class="container darker" *ngIf="i%2==1">
                <div>{{item.createdOwner.username}} ：{{item.question}}</div>
                <div class ="right-content">
                    <span>点赞数：{{item.likeUser.length}}</span>
                    <button class ="like" (click) = "addLike(item.questionId, $event)" [disabled] = "item.liked">点赞</button>
                </div>
              </div>
           </div>

          <div  *ngIf ="user.role =='teacher'" > 
            <div  *ngIf ="item.likeCount>=5" > 
              <div class="container">
                <div>{{item.createdOwner.username}} ：{{item.question}}</div>
                <div class ="right-content">
                    <span>点赞数：{{item.likeUser.length}}</span>
                </div>
              </div>
            </div>
          </div>

    </div>

  </div>
      <div  *ngIf ="user.role =='student'" > 
          <div class ="inputarea">
            <!--<form action = "" #formobj ="ngForm" >-->
              <form action = "" #formobj ="ngForm">
                <input type = "text" placeholder='输入问题' name ="question" ngModel >
                <button (click) = 'createQuestion(formobj)'>提交</button>
              </form>
          </div>
      </div>

</div>